<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <!-- 第一行 -->
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple red">
          <i class="el-icon-user-solid" />
          <span>管理员用户</span>
          <div>{{ list.admin_num }}名</div>
        </div>
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple green">
          <i class="el-icon-user-solid" />
          <span>平台注册用户</span>
          <div>{{ user.total }}名</div>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple orange">
          <i class="el-icon-user-solid" />
          <span>平台文章总数</span>
          <div>{{ list.article_num }}名</div>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple blue">
          <i class="el-icon-user-solid" />
          <span>广告位{{ list.advpos_num }}</span>
          <div>广告图{{ list.advimg_num }}</div>
        </div></el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row class="table-echart">
        <el-col :span="8"><div class="grid-content content bg-purple ">
          <div class="top">
            最新注册新用户
          </div>
          <el-table
            :show-header="false"
            :data="new_user"
            style="width: 100%"
          >
            <el-table-column
              prop="username"
              width="180"
            />
            <el-table-column
              prop="sex"
              width="180"
            >
              <template>
                {{ new_user.sex ?'男':'女' }}
              </template>
            </el-table-column>
          </el-table>
        </div></el-col>
        <el-col :span="8"><div class="grid-content content bg-purple-light">
          <div class="top">
            点赞文章排行
          </div>
          <el-table
            :show-header="false"
            :data="hot_article"
          >
            <el-table-column
              prop="title"
            />
          </el-table>
        </div></el-col>
        <el-col :span="8"><div class="grid-content echarts-pie content bg-purple">
          <div class="top">
            用户性别分析
          </div>
          <pie :user="user" />
        </div></el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row class="bar">
        <el-col :span="24">
          <bar />
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
import bar from '@/views/dashboard/compoments/bar.vue'
import pie from '@/views/dashboard/compoments/pie.vue'
import { getIndexApi } from '@/api/index'
export default {
  name: 'Dashboard',
  components: {
    pie,
    bar
  },
  data() {
    return {
      list: [],
      user: [],
      new_user: [],
      hot_article: []
    }
  },
  created() {
    this.getIndex()
  },
  mounted() {
    // this.init()
  },
  methods: {
    async getIndex() {
      const { data } = await getIndexApi()
      console.log(data)
      this.list = data
      this.user = data.user
      this.new_user = data.new_user
      this.hot_article = data.hot_article
    }

    // init() {
    //   this.chart = Echarts.init(this.$refs.main)
    //   const option = {
    //     tooltip: {
    //       trigger: 'item'
    //     },
    //     legend: {
    //       top: '5%',
    //       left: 'center'
    //     },
    //     series: [
    //       {
    //         name: 'Access From',
    //         type: 'pie',
    //         radius: ['40%', '70%'],
    //         avoidLabelOverlap: false,
    //         itemStyle: {
    //           borderRadius: 10,
    //           borderColor: '#fff',
    //           borderWidth: 2
    //         },
    //         label: {
    //           show: false,
    //           position: 'center'
    //         },
    //         emphasis: {
    //           label: {
    //             show: true,
    //             fontSize: 40,
    //             fontWeight: 'bold'
    //           }
    //         },
    //         labelLine: {
    //           show: false
    //         },
    //         data: [
    //           { value: 1048, name: 'Search Engine' },
    //           { value: 735, name: 'Direct' },
    //           { value: 580, name: 'Email' },
    //           { value: 484, name: 'Union Ads' },
    //           { value: 300, name: 'Video Ads' }
    //         ]
    //       }
    //     ]
    //   }
    //   this.chart.setOption(option)
    // }

  }

}
</script>

<style lang="scss" scoped>
.dashboard-container{
  background-color: #d3dce6;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.content{
  height:380px;
  margin-right:10px;
.top{
  background-color: #dddddd;
}

}
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;

  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
 .red{
    background-color: red;
        min-height: 100px;
  }
  .green{
    background-color:#67c23a;
        min-height: 100px;
  }
  .orange{
    background-color: #e6a23c;
        min-height: 100px;
  }
  .blue{
    background-color: blue;
        min-height: 100px;
  }
  .echarts-pie{
    background-color: #fff;
  }
  .table-echart{
    height:360px;
  }
 ::v-deep .bar{
    height:500px;
    width:100%;

  }

</style>
